import React, { useState, useEffect, useMemo } from 'react'
import { Tabbar } from 'react-vant'
import { Outlet } from 'react-router-dom'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'

export default function Shou() {
    const navigate = useNavigate()
    const [name, setName] = React.useState('/shou/main')
    const handChange = (v) => {
        setName(v)
        navigate(v)
    }
    return (
        <div style={{height:'100vh'}}>
            <div style={{height:'90vh'}}>
                 <Outlet></Outlet>
            </div>
           <div style={{height:'10vh'}}>
            <Tabbar onChange={v => handChange(v)} defaultValue={name}>
                <Tabbar.Item icon={<HomeO />} name='/shou/main'><p style={{fontSize:'0.15rem'}}>主页</p></Tabbar.Item>
                <Tabbar.Item icon={<Search />} name='/shou/unfinished'><p style={{fontSize:'0.15rem'}}>未完成订单</p></Tabbar.Item>
                <Tabbar.Item icon={<FriendsO />} name='/shou/finished'><p style={{fontSize:'0.15rem'}}>已完成订单</p></Tabbar.Item>
                <Tabbar.Item icon={<SettingO />} name='/shou/my'><p style={{fontSize:'0.15rem'}}>我的</p></Tabbar.Item>
            </Tabbar>
           </div>
        </div>
    )
}
